<template>
  <div class="banner" id="bannerSwiper">
    <el-carousel indicator-position="outside" height="400px">
      <el-carousel-item v-for="(value,index) in banner_list" :key="value.id" height="400px">
        <!--      <router-link :to="value.link">-->
        <a :href="value.link">
          <img :src="value.image_url" alt="">
          <!--      </router-link>-->
        </a>
      </el-carousel-item>
    </el-carousel>
  </div>

</template>

<script>
  export default {
    name: "Banner",
    data() {
      return {
        banner_list: [

        ]
      }
    },
    methods:{
      get_banner_data(){
        this.$axios.get(`${this.$settings.Host}/home/banner/`).then((res)=>{
          this.banner_list = res.data.results;
          // console.log(res.data)
        }).catch((error)=>{
          console.log(error);
        })
      }
    },
    created() {
      // 钩子函数，当加载这个组件到某个时刻，自动触发created钩子函数
      this.get_banner_data();
    }
  }
</script>

<style scoped>

  #bannerSwiper {
    width: 1920px;
    height: 400px;
    overflow: hidden;
    margin-bottom: 50px;

  }

  #bannerSwiper a {
    display: inline-block;
    width: 1920px;
    height: 400px;
  }

  #bannerSwiper a img {
    height: 400px;
    width: 100%;
  }
</style>
